<template>
    <slide-view
        class="d-view"
        :listenerIDs="['manager-main-container']"
        :noListenerIDs="['examine-table']"
        @side-close="hideView"
        :appendToBody="true"
        :body-style="{padding: '10px 30px', height: '100%'}"
    >
        <flexbox
            orient="vertical"
            style="height: 100%;"
        >
            <div class="header">
                <flexbox class="detail-header">
                    <div class="header-name">详情</div>
                    <img
                        @click="hideView"
                        class="header-close"
                        src="@/assets/img/task_close.png"
                    />
                </flexbox>
                <div class="detail-header-des">
                    <el-tag>{{showData.status_text}}</el-tag>
                </div>
            </div>
            <div class="detail-body">
                <el-tabs v-model="tabsIndex" type="card">
                    <el-tab-pane
                        label="基本信息"
                        name="first"
                    >

                        <create-sections
                            title="基本信息"
                            class="create-sections"
                        >
                            <div class="create-sections-content">
                                <div class="dialog-content">
                                    <flexbox class="content-items">
                                        <div class="content-items-name">岗位名称：</div>
                                        <div class="content-items-value">{{showData.position}}</div>
                                    </flexbox>
                                    <flexbox class="content-items">
                                        <div class="content-items-name">招聘部门：</div>
                                        <div class="content-items-value">{{showData.structure}}</div>
                                    </flexbox>
                                    <flexbox class="content-items">
                                        <div class="content-items-name">面试人姓名：</div>
                                        <div class="content-items-value">{{showData.name}}</div>
                                    </flexbox>
                                    <flexbox class="content-items">
                                        <div class="content-items-name">面试人电话：</div>
                                        <div class="content-items-value">{{showData.mobile}}</div>
                                    </flexbox>
                                    <flexbox class="content-items">
                                        <div class="content-items-name">计划面试时间：</div>
                                        <div class="content-items-value">{{showData.plan_date}}</div>
                                    </flexbox>
                                    <flexbox class="content-items">
                                        <div class="content-items-name">备注：</div>
                                        <div class="content-items-value">{{showData.remark}}</div>
                                    </flexbox>
                                </div>
                            </div>
                        </create-sections>
                        <create-sections
                            title="记录日志"
                            class="create-sections"
                            v-if="showData.log&&showData.log.length"
                        >
                            <div class="create-sections-content ">
                                <div
                                    class="dialog-content my-label el-tag--warning"
                                    v-for="(item, index) in showData.log"
                                    :key="index"
                                >
                                    <div class="log-title">{{item.step_text}}</div>
                                    <flexbox class="log-item">
                                        <div class="log-name">时间：</div>
                                        <div class="log-content">{{item.op_date}}</div>
                                    </flexbox>
                                    <flexbox class="log-item">
                                        <div class="log-name">备注：</div>
                                        <div class="log-content">{{item.remark}}</div>
                                    </flexbox>
                                    <flexbox class="log-item">
                                        <div class="log-name">结果：</div>
                                        <div class="log-content">{{item.op == 1 ? "通过" : "驳回"}}</div>
                                    </flexbox>
                                </div>
                            </div>
                        </create-sections>
                    </el-tab-pane>
                    <el-tab-pane
                        label="操作"
                        name="second"
                        v-if="showOperate(showData.status)"
                    >
                        <create-sections
                            :title="formTitle"
                            class="create-sections"
                        >
                            <div class="create-sections-content">
                                <div class="dialog-content">
                                    <el-form
                                        ref="crmForm"
                                        :model="crmForm"
                                        label-position="top"
                                        class="crm-create-box"
                                    >
                                        <el-form-item
                                            v-for="(item, index) in this.crmForm.crmFields"
                                            :key="item.key"
                                            :prop="'crmFields.' + index + '.value'"
                                            :class="{ 'crm-create-block-item': item.showblock, 'crm-create-item': !item.showblock }"
                                            :rules="crmRules[item.key]"
                                            :style="{'padding-left': getPaddingLeft(item, index), 'padding-right': getPaddingRight(item, index)}"
                                        >
                                            <div
                                                slot="label"
                                                style="display: inline-block;"
                                            >
                                                <div style="font-size:12px;word-wrap:break-word;word-break:break-all;">
                                                    {{item.data.name}}
                                                    <span style="color:#999;">
                                                        {{item.data.input_tips ? '（'+item.data.input_tips+'）':''}}
                                                    </span>
                                                </div>
                                            </div>
                                            <component
                                                :is="item.data.form_type | typeToComponentName"
                                                :value="item.value"
                                                :index="index"
                                                :item="item"
                                                :radio="false"
                                                @value-change="fieldValueChange"
                                            >
                                            </component>
                                        </el-form-item>
                                    </el-form>
                                    <div class="handle-bar">
                                        <el-button
                                            class="handle-button"
                                            @click.native="hideView"
                                        >取消</el-button>
                                        <el-button
                                            class="handle-button"
                                            type="primary"
                                            @click.native="saveField"
                                        >保存</el-button>
                                    </div>
                                    <br><br><br><br>
                                </div>
                            </div>
                        </create-sections>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </flexbox>
    </slide-view>
</template>

<script>
import SlideView from "@/components/SlideView";
import CreateSections from "@/components/CreateSections";
import {
    recordInfoAPI,
    firstInterviewAPI,
    secondInterviewAPI,
    masterCheckAPI,
    dealInAPI,
    dealLeaveAPI
} from "@/api/personnel/personnel";
import {
    XhInput,
    XhTextarea,
    XhSelect,
    XhUserCell,
    XhStrucUserCell,
    XhDateTime,
    XhDate
} from "@/components/CreateCom";
import Nzhcn from "nzh/cn";
import { mapGetters } from "vuex";

export default {
    /** 系统审批详情 */
    name: "system-examine-detail",
    components: {
        SlideView,
        CreateSections,
        XhInput,
        XhTextarea,
        XhSelect,
        XhUserCell,
        XhStrucUserCell,
        XhDateTime,
        XhDate
    },
    props: {
        // 详情信息
        data: Object
    },
    filters: {
        /** 根据type 找到组件 */
        typeToComponentName(form_type) {
            if (form_type == "text") {
                return "XhInput";
            } else if (form_type == "textarea") {
                return "XhTextarea";
            } else if (form_type == "select") {
                return "XhSelect";
            } else if (form_type == "structure") {
                return "XhStrucUserCell";
            } else if (form_type == "dateTime") {
                return "XhDateTime";
            } else if (form_type == "date") {
                return "XhDate";
            }
        },
        numberToZh: function(value) {
            return Nzhcn.encodeS(value);
        }
    },
    watch: {
        data: function(value) {
            this.getRecordDetail();
        }
    },
    data() {
        return {
            // tabs index
            tabsIndex: 'first',
            // 状态
            status: "",
            // 详情
            showData: {},
            // 标题展示名称
            loading: false,
            // 自定义字段验证规则
            crmRules: {},
            // 自定义字段信息表单
            crmForm: {
                crmFields: []
            },
            // 选择项基本数据
            op: [{ name: "通过", value: "1" }, { name: "驳回", value: "-1" }],
            op1: [
                { name: "录用", value: "1" },
                { name: "不录用", value: "-1" }
            ],
            sex: [
                { name: "男", value: "男" },
                { name: "女", value: "女" },
                { name: "保密", value: "保密" }
            ]
        };
    },
    computed: {
        ...mapGetters(["hr"]),
        // 创建权限
        userSaveAuth() {
            return this.hr&&this.hr.interview && this.hr.interview.addrecord
        },
        // 编辑权限
        userUpdateAuth() {
            return this.hr&&this.hr.interview && this.hr.interview.editrecord
        },
        // 删除权限
        userDeleteAuth() {
            return this.hr&&this.hr.interview && this.hr.interview.recorddel
        },
        // 一面记录权限
        userFirstAuth() {
            return this.hr&&this.hr.interview && this.hr.interview.firstinterview
        },
        // 二面记录权限
        userSecondAuth() {
            return this.hr&&this.hr.interview && this.hr.interview.secondinterview
        },
        // 审核权限
        userCheckAuth() {
            return this.hr&&this.hr.interview && this.hr.interview.mastercheck
        },
        // 入职权限
        userDealinAuth() {
            return this.hr&&this.hr.interview && this.hr.interview.dealin
        },
        // 离职权限
        userLeaveAuth() {
            return this.hr&&this.hr.interview && this.hr.interview.dealleave
        },
        formTitle() {
            let title = "";
            switch (this.data.status) {
                case 10:
                    title = "一面记录";
                    break;
                case 20:
                    title = "二面记录";
                    break;
                case 25:
                    title = "三面记录";
                    break;
                case 30:
                    title = "办理入职";
                    break;
                case 40:
                    title = "办理离职";
                    break;
                default:
                    title = "";
            }
            return title;
        }
    },
    mounted() {
        this.getRecordDetail();
    },
    methods: {
        /** 获取面试详情 */
        getRecordDetail() {
            recordInfoAPI({
                id: this.data["id"]
            })
                .then(res => {
                    this.showData = res.data;
                    this.status = res.data.status;
                    this.getField();
                })
                .catch(() => {});
        },

        /** 提交面试记录 start */
        // 字段的值更新
        fieldValueChange(data) {
            var item = this.crmForm.crmFields[data.index];
            item.value = data.value;
            //无事件的处理 后期可换成input实现
            // if (item.data.form_type == 'structure') {
            //   this.$refs.crmForm.validateField('crmFields.' + data.index + '.value')
            // }
        },
        // 获取自定义字段
        getField() {
            let status = this.status;
            var field = [];
            // 一面
            if (this.userFirstAuth&&status == 10) {
                field.push({
                    field: "op_date",
                    form_type: "dateTime",
                    is_null: 1,
                    name: "面试时间",
                    setting: [],
                    input_tips: "",
                    value: ""
                });
                field.push({
                    field: "remark",
                    form_type: "textarea",
                    is_null: 1,
                    name: "面试记录",
                    setting: [],
                    input_tips: "请填写面试相关描述，限制输入2000字",
                    value: ""
                });
                field.push({
                    field: "op",
                    form_type: "select",
                    is_null: 1,
                    name: "是否通过",
                    setting: this.op,
                    value: ""
                });
                field.push({
                    field: "plan_date",
                    form_type: "dateTime",
                    is_null: 0,
                    name: "计划面试时间",
                    setting: [],
                    input_tips: "",
                    value: ""
                });
            }
            // 二面
            if (this.userSecondAuth&&status==20) {
                field.push({
                    field: "op_date",
                    form_type: "dateTime",
                    is_null: 1,
                    name: "面试时间",
                    setting: [],
                    input_tips: "",
                    value: ""
                });
                field.push({
                    field: "remark",
                    form_type: "textarea",
                    is_null: 1,
                    name: "面试记录",
                    setting: [],
                    input_tips: "请填写面试相关描述，限制输入2000字",
                    value: ""
                });
                field.push({
                    field: "op",
                    form_type: "select",
                    is_null: 1,
                    name: "是否通过",
                    setting: this.op,
                    value: ""
                });
            }
            // 核查
            if (this.userCheckAuth&&status==25) {
                field.push({
                    field: "op_date",
                    form_type: "dateTime",
                    is_null: 1,
                    name: "面试时间",
                    setting: [],
                    input_tips: "",
                    value: ""
                });
                field.push({
                    field: "remark",
                    form_type: "textarea",
                    is_null: 1,
                    name: "面试记录",
                    setting: [],
                    input_tips: "请填写面试相关描述，限制输入2000字",
                    value: ""
                });
                field.push({
                    field: "op",
                    form_type: "select",
                    is_null: 1,
                    name: "是否录用",
                    setting: this.op1,
                    value: ""
                });
            }
            // 入职
            if (this.userDealinAuth&&status==30) {
                field.push({
                    field: "sex",
                    form_type: "select",
                    is_null: 1,
                    name: "性别",
                    setting: this.sex,
                    value: ""
                });
                field.push({
                    field: "birthday",
                    form_type: "date",
                    is_null: 1,
                    name: "生日",
                    setting: [],
                    input_tips: "",
                    value: ""
                });
                field.push({
                    field: "address",
                    form_type: "text",
                    is_null: 1,
                    name: "地址",
                    setting: [],
                    input_tips: "",
                    value: ""
                });
                field.push({
                    field: "id_card",
                    form_type: "text",
                    is_null: 1,
                    name: "身份证号",
                    setting: [],
                    input_tips: "",
                    value: ""
                });
                field.push({
                    field: "remark",
                    form_type: "textarea",
                    is_null: 1,
                    name: "备注",
                    setting: [],
                    input_tips: "请填写相关描述说明，限制输入2000字",
                    value: ""
                });
            }
            // 离职
            if (this.userLeaveAuth&&status==40) {
                field.push({
                    field: "op_date",
                    form_type: "dateTime",
                    is_null: 1,
                    name: "离职日期",
                    setting: [],
                    input_tips: "",
                    value: ""
                });
                field.push({
                    field: "remark",
                    form_type: "textarea",
                    is_null: 1,
                    name: "离职原因",
                    setting: [],
                    input_tips: "请填写相关描述说明，限制输入2000字",
                    value: ""
                });
            }
            this.getcrmRulesAndModel(field);
        },
        // 根据自定义字段获取自定义字段规则
        getcrmRulesAndModel(list) {
            let formData = [];
            for (let index = 0; index < list.length; index++) {
                const item = list[index];
                /** 规则数据 */
                var tempList = [];

                //验证必填
                if (item.is_null == 1) {
                    tempList.push({
                        required: true,
                        message: item.name + "不能为空",
                        trigger: ["blur", "change"]
                    });
                }

                this.crmRules[item.field] = tempList;

                /** 表单数据 */
                var params = {};
                params["value"] = item.value;
                params["key"] = item.field;
                params["data"] = item;
                if (item.form_type == "textarea") {
                    params["showblock"] = true; // 展示整行效果
                }
                formData.push(params);
            }
            this.crmForm.crmFields = formData;
        },
        // 保存数据
        saveField() {
            this.$refs.crmForm.validate(valid => {
                if (valid) {
                    this.submiteParams(this.crmForm.crmFields);
                } else {
                    this.$message.error("请完善必填信息");
                    return false;
                }
            });
        },
        // 请求url
        getRequest() {
            let api = "";
            switch (this.status) {
                case 10:
                    api = firstInterviewAPI;
                    break;
                case 20:
                    api = secondInterviewAPI;
                    break;
                case 25:
                    api = masterCheckAPI;
                    break;
                case 30:
                    api = dealInAPI;
                    break;
                case 40:
                    api = dealLeaveAPI;
                    break;
                default:
                    api = "";
            }
            return api;
        },
        /** 提交数据 */
        submiteParams(array) {
            this.loading = true;
            var params = this.getSubmiteParams(array);
            params.record_id = this.showData.id;
            console.log("array=====>", array);
            // return null
            this.getRequest()(params)
                .then(res => {
                    this.loading = false;
                    this.hideView();
                    this.$message.success(res.data);
                    // 回到保存成功
                    this.$emit("refresh");
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        // 请求参数
        getSubmiteParams(array) {
            var params = {};
            for (let index = 0; index < array.length; index++) {
                const element = array[index];
                params[element.key] = element.value;
            }
            return params;
        },
        // 获取左边padding
        getPaddingLeft(item, index) {
            if (item.showblock && item.showblock == true) {
                return "0";
            }
            // return index % 2 == 0 ? "0" : "25px";
            return index % 2 == 0 ? "0" : "0";
        },
        // 获取左边padding
        getPaddingRight(item, index) {
            if (item.showblock && item.showblock == true) {
                return "0";
            }
            // return index % 2 == 0 ? "25px" : "0";
            return index % 2 == 0 ? "0" : "0";
        },
        /** 提交面试记录 end */

        /** 点击关闭按钮隐藏视图 */
        showOperate (status) {
            let arr = [50, -20, -25, -30, -40]
            if (arr.includes(status)) {
                return false
            } else {
                return true
            }
        },
        /** 点击关闭按钮隐藏视图 */
        hideView() {
            this.$emit("hide-view");
        }
    }
};
</script>

<style lang="scss" scoped>
.header {
    width: 100%;
    margin-bottom: 20px;
}
.detail-header {
    position: relative;
    min-height: 60px;
    .header-name {
        font-size: 14px;
        color: #333333;
        flex: 1;
        .delete {
            color: #3e84e9;
            padding: 0 10px;
            font-size: 13px;
            cursor: pointer;
        }
    }
    .header-close {
        display: block;
        width: 30px;
        height: 30px;
        margin-left: 20px;
        padding: 5px;
        cursor: pointer;
    }
}

.detail-header-des {
    color: #999999;
    font-size: 12px;
    .status {
        float: left;
    }
    .status-handle {
        float: right;
    }
}

.detail-body {
    flex: 1;
    overflow-y: auto;
    width: 100%;

    .create-sections {
        padding: 5px 0;
        /deep/ .section-header {
            padding: 5px 0;
        }
    }

    .create-sections-content {
        padding: 0;
    }

    .dialog-content {
        margin-top: 10px;
        .content-items {
            padding: 10px 0;
            .content-items-name {
                width: 132px;
                color: #777;
                flex-shrink: 0;
            }
            .content-items-value {
                flex: 1;
            }
        }
    }
}
.my-label {
    padding: 16px;
    border-radius: 6px;
    margin-bottom: 10px;
    .log-title {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 10px;
    }
    .log-item {
        margin-top: 10px;
        color: #666;
        font-size: 13px;
        line-height: 1.6;
        align-items: flex-start;
        .log-name {
            margin-right: 10px;
        }
        .log-content {
            flex: 1;
            text-align: justify;
        }
    }
}

// 详情
.d-view {
    position: fixed;
    width: 500px;
    top: 60px;
    bottom: 0px;
    right: 0px;
}
/** 将其改变为flex布局 */
.crm-create-box {
    display: flex;
    flex-wrap: wrap;
}

.crm-create-item {
    flex: 0 0 100%;
    flex-shrink: 0;
    padding-bottom: 10px;
}

// 占用一整行
.crm-create-block-item {
    flex: 0 0 100%;
    flex-shrink: 0;
    padding-bottom: 10px;
}

.el-form-item /deep/ .el-form-item__label {
    line-height: normal;
    font-size: 13px;
    color: #333333;
    position: relative;
    padding-left: 8px;
    padding-bottom: 0;
}

.el-form /deep/ .el-form-item {
    margin-bottom: 10px;
}

.el-form /deep/ .el-form-item.is-required .el-form-item__label:before {
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
    position: absolute;
    left: 0;
    top: 5px;
}
</style>

